import React, { Component } from 'react';
import styles from "./ConfirmPayment.module.scss"
import { connect } from "react-redux"
import { withRouter } from "react-router-dom"
import Lazy from "../../../utils/imgLazyLoad"

class ConfirmPayment extends Component {
    render() {     
        return (
            <div className={styles.ConfirmPayment}>
                {/* 确认订单标题 */}
                <div className={styles.paymentTit}>
                    <span className={styles.back} onClick={()=>{this.props.history.goBack()}}>
                        <svg className="icon" aria-hidden="true">
                            <use href="#icon-zuojiantou-copy"></use>
                        </svg>
                    </span>
                    <h2>确认订单</h2>
                </div>
                {/* 配送信息 */}
                <div className={styles.payMsg}>
                    {/* 用来定位的父元素 */}
                    <div className={styles.relBg}>
                        <div className={styles.msgContent}>
                            {/* 配送方式 */}
                            <div className={styles.conTop}>
                                <div className={styles.send}>外卖配送</div>
                                <div className={styles.self}>到店自取</div>
                            </div>
                            {/* 配送地址 */}
                            <div className={styles.sendPlace}>
                                {/* 送达地址 */}
                                <div className={styles.nowPlace}>{this.props.address}</div>
                                {/* 顾客信息 */}
                                <div className={styles.userName}>
                                    <span>{this.props.userInfo["0"].username}</span>
                                    <span>{this.props.userInfo["0"].telephone}</span>
                                </div>
                                {/* 送达时间 */}
                                <div className={styles.arriveTime}>
                                    <strong>立即送出</strong>
                                    <em>大约12.00送到</em>
                                </div>
                                {/* 支付方式 */}
                                <div className={styles.payWay}>
                                    <strong>支付方式</strong>
                                    <em>支付宝</em>
                                </div>
                            </div>
                            {/* 食品信息 */}
                            <div className={styles.storeBox}>
                                {/* 店铺名 */}
                                <div className={styles.storeName}>{this.props.storeMsg.shopAddress}</div>
                                {/* 所选则的食品 */}
                                <div className={styles.selectFood}>
                                    {this.props.selectFood.map((v)=>
                                        <div key={v.id} className={styles.foodItem}>
                                            <Lazy src={"http://175.24.122.212:9090/"+v.picture} alt="图片"/>
                                            <div className={styles.itemMsg}>
                                                <h2>{v.name}</h2>
                                                <div className={styles.itemPrice}>
                                                    <span>x{v.num}</span>
                                                    <strong>￥{v.price}</strong>
                                                </div>
                                            </div>
                                        </div>  
                                    )}
                                </div>
                                {/* 配送费 包装费 */}
                                <div className={styles.sendPrice}>
                                    <div className={styles.packingPay}>
                                        <span>包装费</span>
                                        <strong>￥0</strong>
                                    </div>
                                    <div className={styles.sendPay}>
                                        <span>配送费(吃了么快送)</span>
                                        <strong>￥0</strong>
                                    </div>
                                </div>
                                {/* 店铺优惠 */}
                                <div className={styles.discounts}>
                                    <div className={styles.disItem}>
                                        <div className={styles.disLeft}>
                                            <span>减</span>
                                            <em>店铺满减</em>
                                        </div>
                                        <div className={styles.disRight}>
                                            <span>￥0</span>
                                        </div>
                                    </div>
                                    <div className={styles.disItem}>
                                        <div className={styles.disLeft}>
                                            <span>折</span>
                                            <em>菜品折扣</em>
                                        </div>
                                        <div className={styles.disRight}>
                                            <span>￥0</span>
                                        </div>
                                    </div>
                                </div>
                                {/* 价格说明 */}
                                <div className={styles.totalPrice}>
                                    <div className={styles.priceLeft}>
                                        价格说明
                                    </div>
                                    <div className={styles.priceRight}>
                                        <div className={styles.rightDis}>
                                            <p>已优惠</p>
                                            <span>￥0</span>
                                        </div>
                                        <div className={styles.rigthAll}>
                                            <p>小计</p>
                                            <span>￥{(this.props.totalPrice ===0 ? 0 : this.props.totalPrice).toFixed(1)}</span>
                                        </div>
                                    </div>
                                </div>
                                {/* 提交订单 */}
                                <div className={styles.submitOrder}>
                                    <span>提交订单</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
const mapStateToProps = (state)=>{
    return {
        address:sessionStorage.getItem("address"),
        // 获取用户信息
        userInfo:state.loginReducer.userInfo,
        // 获取redux里面初始的商家信息
        storeMsg:state.foodStoreReducer.initStoreMsg,
        selectFood:state.foodStoreReducer.beSelectKind.filter(function(v,i){
            return v.num>0
        }),
        totalPrice:state.foodStoreReducer.beSelectKind.reduce((prev,item)=>{
            return (prev + item.price*item.num)
        },0)
    }
}

export default connect(mapStateToProps,null)(withRouter(ConfirmPayment))
